<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
padding: 0;
margin: 0;
}
h1{
    margin: 100px;
    display: flex;
    justify-content: center;
}
div {
width: 882px;
height: 86px;
margin: 200px auto;
overflow: hidden;
}
div > ul {
/*设置ul的宽度为2倍div的宽度*/
width: 200%;
list-style: none;
/*动画属性*/
animation: imgMove 5s linear infinite;

}
/* 暂停动画 */
div>ul:hover{
animation-play-state: paused;
}
div > ul > li {
width: 126px;
float: left;
}

div img {
width: 100%;
}
/*创建动画*/
@keyframes imgMove {
from {
transform: translateX(0px);
}
to {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<h1>唯美食不可辜负</h1>
<div>
<ul>
<li><img src="./assets/jpg/zaocan.jpg" alt=""/></li>
<li><img src="./assets/jpg/chaofan.jpg" alt=""/></li>
<li><img src="./assets/jpg/niupai.jpg" alt=""/></li>
<li><img src="./assets/jpg/dangao.jpg" alt=""/></li>
<li><img src="./assets/jpg/binggan.jpg" alt=""/></li>
<!--将需要轮播的图片在复制一份-->
<li><img src="./assets/jpg/zaocan.jpg" alt=""/></li>
<li><img src="./assets/jpg/chaofan.jpg" alt=""/></li>
<li><img src="./assets/jpg/niupai.jpg" alt=""/></li>
<li><img src="./assets/jpg/dangao.jpg" alt=""/></li>
<li><img src="./assets/jpg/binggan.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>